<template>
    <div style="height:400px;">
    <el-table :data="tableData" height="370" style="width: 100%" v-if="tableData != ''">
    <el-table-column prop="film.fname" label="片名" width="180" />
    <el-table-column prop="time" label="开始时间" width="180" />
    <el-table-column prop="cinema.cname" label="影院" />
    <el-table-column prop="room.rname" label="放映厅" />
    <el-table-column prop="price" label="售价(员)" />
    <!-- <el-table-column prop="address" label="选座购票" /> -->
    <el-table-column label="选座购票" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row.film.fid,scope.row.cid)"
          >选座购票</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="noshow" v-else>暂无演出计划</div>

    </div>
    
</template>
<script>
    import axios from 'axios'
    import { mapState } from 'vuex';
    export default {
      name: 'yanchu',
      data(){
        return{
            tableData:[],
        }
    
      },
      watch:{
        cinemaId(){
            this.showByShouye();
        },
        fid(){
        
        this.showByCinema();
        }
      },
      computed:{
        ...mapState(["cinemaId","fid"]),
      },
      components: {
      },
      methods:{
        showAllCinema(){
          axios.get("http://localhost:8080/cinemaByFilm").then((resp) => {
          this.tableData = resp.data;
          console.log(this.tableData);
      })
        },
        handleClick(id,id2){
          var user=JSON.parse(sessionStorage.getItem('myuser'));
        console.log(344,user);
          console.log(this.$store.state.denglu);    
          if(user!=null){
            this.$router.push({ path: '/buy', query: { userId: id ,cid: id2}});
        }else{
          this.$router.push({ path: '/logn', query: { Id: id, cid: id2}});
        }
        
      },
      showByCinema(){
        axios.get("http://localhost:8080/cinemaByYanchu/"+this.$store.state.cinemaId).then((resp) => {
            this.tableData = resp.data;
            console.log(this.$store.state.cinemaId );
            console.log(this.tableData);
          })
      },
      showByShouye(){
        axios.get("http://localhost:8080/cinemaByFid/"+this.$store.state.fid).then((resp) => {
        this.tableData = resp.data;
        console.log(this.$store.state.fid );
        console.log(this.tableData);
          })
      },
      ifSelect(){
          //  var fName =this.$route.query.sendName;
            if(!this.$store.state.cinemaId ==""){
              this.$store.state.fid = "";
              // console.log(this.$store.state.cinemaId );
              // console.log("33333");
              this.showByCinema();
          }else
          if(!this.$store.state.fid ==""){
            this.$store.state.cinemaId = "";
            this.showByShouye();
          }else{
            this.$store.state.cinemaId ="";
             this.$store.state.fid ="";
            this.showAllCinema(); 
            console.log("1111111");
          }
          
          // this.$store.state.cinemaId =="";
          // this.$store.state.fid =="";
          //  this.tableData=null;
        },
        
       
        
      },
      created() {
      // axios.get("http://localhost:8080/cinemaByFilm").then((resp) => {
      //   this.tableData = resp.data;
      //   console.log(this.tableData);
      // })
   this.ifSelect();
    
  },
    }
    </script>
<style scoped>
.noshow{
  text-align: center;
  width: 100%;
  height: 50px;
  color: rgb(99, 99, 95);
  position: relative;
  top: 190px;
}
</style>
